<template>
  <Temp title="定位">
    <div class="location">
      <div class="form-container">
        <el-form
          :inline="true"
          ref="form"
          class="form"
          :model="formData"
        >
          <el-form-item
            class="label"
            label="经度："
            prop="longitude"
            :rules="[
              {
                required: true,
                message: '请设置经度,范围在0-360之间',
                type: 'number',
                min: 0,
                max: 360
              }
            ]"
          >
            <el-input
              clearable
              size="small"
              type="number"
              v-model.number="formData.longitude"
              placeholder="请设置经度"
              @wheel.native.prevent="
                stopScrollFunction($event)
              "
            />
          </el-form-item>
          <el-form-item
            class="label"
            label="纬度："
            prop="latitude"
            :rules="[
              {
                required: true,
                message: '请设置纬度,范围在-90~90之间',
                type: 'number',
                min: -90,
                max: 90
              }
            ]"
          >
            <el-input
              clearable
              size="small"
              type="number"
              v-model.number="formData.latitude"
              placeholder="请设置纬度"
              @wheel.native.prevent="
                stopScrollFunction($event)
              "
            />
          </el-form-item>
        </el-form>
        <el-button @click="flyTo" class="location-button"
          >定位坐标</el-button
        >
      </div>
    </div>
  </Temp>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import { getAction } from '@/utils/helper'

const camera = {}

export default {
  inject: ['viewerId'],
  components: {
    Temp
  },
  data() {
    return {
      formData: {
        longitude: 116.300527,
        latitude: 30.715648
      }
    }
  },
  async created() {
    const { toolManager } = await getAction(this.viewerId)
    camera[this.viewerId] = toolManager.camera
  },
  methods: {
    flyTo() {
      const longitude = this.formData.longitude
      const latitude = this.formData.latitude
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return
        }
        camera[this.viewerId].flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            longitude,
            latitude,
            10727.2
          ),
          orientation: {
            heading: Cesium.Math.toRadians(2.9),
            pitch: Cesium.Math.toRadians(-24.6),
            roll: 0
          }
        })
      })
    },
    stopScrollFunction(evt) {
      evt = evt || window.event
      if (evt.preventDefault) {
        evt.preventDefault()
        evt.stopPropagation()
      } else {
        // IE
        evt.cancelBubble = true
        evt.returnValue = false
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.location {
  min-width: 200px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  background-color: #193b51;
  border-radius: 0 0 8px 8px;

  .form-container {
    .form {
      width: 22.5rem;
      display: flex;

      ::v-deep {
        .el-form-item__label {
          color: white;
        }
      }

      .el-input {
        ::v-deep {
          .el-input__inner {
            background-color: #0c87a8;
            color: white;
          }
        }

        ::v-deep {
          input[type='number']::-webkit-inner-spin-button,
          input[type='number']::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }
      }
    }

    .location-button {
      background-color: #0c87a8;
      color: #fff;
    }
  }
}
</style>
